<script setup lang="ts">
import { ref } from 'vue';
import BGpage from './component/BGpage.vue';
import Pane from './component/Pane.vue';
import Table from './component/Table.vue';
import Echarts from './component/Echarts.vue';
import ClassRoomOnline from './component/ClassRoomOnline.vue';


</script>

<template>
 <div class="main">
  <BGpage>
    <div class="small">
      <span>大屏显示</span>
    </div>
    <div class="context">
    <div class="row1">
      <Echarts style="width: 100%; height: 40vh;"></Echarts>
      <Pane style="width: 100%; height: 40vh;"></Pane>
      <Pane style="width: 100%; height: 40vh;"></Pane>
    </div>
    <div class="row2">
      <ClassRoomOnline style="width: 100%; height: 40vh;"></ClassRoomOnline>
      <!-- <ClassRoomOnline /> -->
     <Table style="width:33vw ; height: 50vh;"></Table>
    </div>
    </div>
  </BGpage>
 </div>
</template>

<style scoped>
.row1{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.row2{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.main{
  
  height: 100vh;
  width: 100vw;
}
.small{
  background-image:url(../images/title_bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 10%;

  display: flex;
  justify-content: center;
  align-items: center;
}
.small>span{
    text-align: center;
    color: white;
    font-size: 3.5vh;
}
.context{
  overflow: hidden;
  overflow-y: hidden;
}

</style>
